<template>
	<f-popup ref="popup" width="690rpx">
		<view class="remark-popup">
			<view class="padding-b32">
				<view class="padding-b16">
					<text class="font-size-26 black-color">审核结果</text>
				</view>
				<view class="flex align-center">
					<radio-group @change="radioChange" class="flex align-center">
						<label class="flex align-center font-size-26"><radio value="1" color="#0052D9" :checked="audit === '1'" style="transform: scale(0.8);" />同意</label>
						<label class="flex align-center font-size-26"><radio value="-1" color="#0052D9" :checked="audit === '-1'" style="transform: scale(0.8); margin-left: 32rpx;" />不同意</label>
					</radio-group>
				</view>
			</view>
			<view class="padding-b16">
				<text class="font-size-26 black-color">备注描述</text>
			</view>
			
			<view class="remark">
				<textarea v-model="remark" placeholder="请输入备注描述"></textarea>
			</view>
			
			<view class="btns">
				<button @click="close()">取消</button>
				<button @click="confirm">确认</button>
			</view>
		</view>
	</f-popup>
	
</template>

<script>
	export default {
		data() {
			return {
				remark: '',
				audit: '1'
			};
		},
		methods:{
			confirm() {
				this.close()
				this.$emit('confirm', { remark: this.remark, audit: this.audit })
				this.$nextTick(()=>{
					this.remark = ''
				})
			},
			radioChange(event) {
				console.log('event', event);
				const { value } = event.detail
				this.audit = value
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.remark-popup{
		width: 100%;
		padding: 32rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		
		.remark{
			padding: 16rpx;
			border-radius: 16rpx;
			border: 1px solid rgba(0,0,0,0.1);
		}
		
		.btns{
			display: flex;
			padding-top: 42rpx;
			
			button{
				width: 100%;
				color: #FFFFFF;
				
				&::after{
					border: none;
				}
				
				&:first-child{
					color: rgba(0, 0, 0, 0.9);
					background-color: #FFFFFF;
					border: 1px solid rgba(0, 0, 0, 0.6);
				}
				
				&:last-child{
					margin-left: 24rpx;
					background-color: var(--primary-color);
				}
			}
		}
	}
</style>
